<!--  -->
<template>
    <div class="box">
        <div class="top">
            <p class="title">预约渠道数据统计</p>
            <p class="bg"></p>
        </div>
        <div class="charts" ref="charts"></div>
        
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import * as echarts from "echarts"

const charts=ref()

onMounted(()=>{
    let mycharts=echarts.init(charts.value)

    mycharts.setOption({
    title: {
    text: ''
  },
//   legend: {
//     data: ['Allocated Budget', 'Actual Spending']
//   },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
})
})


</script>

<style lang="scss" scoped>
.box{
    background: url(../../images//dataScreen-main-lc.png) no-repeat;
    background-size: 100% 100%;
    .top {
        .title {
            color: #ffffff;
            font-size: 16px;
            font-style: italic;

        }

        .bg {
            width: 68px;
            height: 7px;
            margin-top: 10px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
        }



    }
    .charts{
        width:100%;
        height:200px
    }
}
</style>